<template>
  <div class="account-card">
    <el-form :model="form" label-width="80px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="Old Password">
            <el-input v-model="form.oldPassword" type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="New Password">
            <el-input v-model="form.newPassword" type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Confirm Password">
            <el-input v-model="form.confirmPassword" type="password" />
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button color="#19af7d" class="save-btn">保 存</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const form = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
</script>

<style scoped lang="scss">
.account-card {
  border-radius: 8px;
  padding: 24px;
  margin: 0 auto;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.save-btn {
  width: 150px;
  margin: 0 auto;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
